<template>
    <a-layout-header class="head" :style="{zIndex: 1}">
        <a-row>

            <a-col :xs="{ span: 0 }" :sm="{ span: 3, offset: 2 }">
                <div class="logo">
                    简单博客
                </div>
            </a-col>

            <a-col :xs="{ span: 24 }" :sm="{ span: 17 }">
                <a-menu mode="horizontal" class="menu">
                    <a-menu-item key="1" class="menuItem" @click="link('/article')">
                        文章
                    </a-menu-item>
                    <a-menu-item key="2" class="menuItem" @click="link('/classification')">
                        归类
                    </a-menu-item>
                    <a-menu-item key="3" class="menuItem" @click="link('/search')">
                        搜索
                    </a-menu-item>
                    <a-menu-item key="4" class="menuItem" @click="showDetails(0)">
                        关于
                    </a-menu-item>
                </a-menu>
            </a-col>

        </a-row>
    </a-layout-header>
</template>

<script>
    export default {
        name: "TopMenu",
        methods: {
            link(url) {
                this.$router.push(url);
            },
            showDetails(id) {
                this.$router.push({
                    path: '/details',
                    query: { id }
                })
            }
        }
    }
</script>

<style scoped>
    .head {
        background-color: var(--my-white);
        width: 100%;
        position: fixed;
    }
    .logo {
        width: 120px;
        height: 31px;
        float: left;
        font-size: var(--h3);
        font-weight: bold;
        text-align: center;
    }
    .menu {
        background-color: var(--my-white);
        line-height: 64px;
        font-size: var(--h4);
        float: right;
    }
</style>